<script setup>
import { ref, getCurrentInstance } from 'vue'
import { ArrowDownBold, Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const { proxy } = getCurrentInstance()
// const TransactionsList = ref([])
const router = useRouter()
const add = ref('')
const option = ref(0)
const ArrFilters = ['All Filters', 'BlockNumber', 'Address', 'Hash']

const onSelect = (e) => {
    option.value = e
}
const enterToLogin = (e) => {
    // alert(e.keyCode)
    if (e.keyCode == 13) {
        onSearch()
    }
}
const updateValue = (e) => {
    add.value = e.target.value
}

const onSearch = () => {
    if (add.value == '') {
        // this.$router.push(`/error?a=${add.value}`)
        return false
    }
    var param = {
        "content": add.value
    }

    proxy.$axios.post("/api/Scan/Search", param).then((res) => {
        console.log(res)
        if (res.code == 'Success') {
            switch (option.value) {
                case 1:
                    router.push(`/block/${add.value}`);
                    break;
                case 2:
                    router.push(`/address/${add.value}`);
                    break;
                case 3:
                    router.push(`/tx/${add.value}`);
                    break;
                default:
                    if (res.data.type === 'BlockNumber') {
                        router.push(`/block/${add.value}`)
                    } else if (res.data.type === 'Address') {
                        router.push(`/address/${add.value}`)
                    } else if (res.data.type === 'Hash') {
                        router.push(`/tx/${add.value}`)
                    } else {
                        router.push(`/error?a=${add.value}`)
                    }
                    break;
            }
            add.value = ''
        }
    })
}

</script>

<template>
    <div class="container">
        <p class="something">Something About TOK Chain</p>

        <div class="select_box">
            <div class="select">
                <div>
                    <span>{{ ArrFilters[option] }}</span>
                    <el-icon>
                        <ArrowDownBold />
                    </el-icon>
                    <ul>
                        <li v-for="(item, idx) in ArrFilters" :class="idx == option ? 'ups' : ''" :key="idx"
                            @click="onSelect(idx)">
                            {{ item }}
                        </li>
                    </ul>
                </div>
            </div>
            <input id="txtSearchInput" type="text" autocomplete="off" spellcheck="false" :value="add" @input="updateValue"
                @keydown="enterToLogin" placeholder="Search by Address / Txn Hash / Block / Token / Ens" maxlength="68" />
            <el-button @click="onSearch" :icon="Search" />
        </div>

    </div>
</template>

<style lang="less" scoped>
.something {
    text-align: center;
    font-size: 1.2rem;
    font-family: var(--font-medium);
}

.select_box {
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--vt-c-indigo);
    border-radius: 6px;
    height: 50px;
    width: 90%;
    max-width: 652px;
    color: #fff;
    padding: 4px;

    .select {
        >div {
            // border-radius: 5px 0 0 5px;
            display: flex;
            align-items: center;
            padding: 0 10px 0 20px;
            margin-right: 5px;
            border-right: 1px solid #666;
            height: 100%;
            height: var(--input-height);
            cursor: pointer;
            position: relative;

            &:hover {
                ul {
                    opacity: 1;
                    z-index: 100;
                }
            }

            ul {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 41px;
                background: var(--vt-c-indigo);
                border-radius: 6px;
                padding: 8px;
                left: -4px;
                right: 0;
                z-index: -1;
                transition: .5s;

                li {
                    padding: 5px;
                    transition: .5s;
                    margin: 2px 0;
                    font-size: 0.9rem;
                }

                .ups,
                li:hover {
                    background: var(--primary-color);
                    border-radius: 5px;
                }

                .ups::before {
                    content: '✔';
                    padding-right: 5px;
                    font-size: 0.85rem;
                }
            }
        }

        span {
            min-width: 95px;
            display: block;
            font-size: 0.9rem;
        }

        .el-icon {
            font-size: 12px;
        }

        select {
            padding: 0 5px 0 15px;
            color: #333;
            line-height: 44px;
            height: 44px;
        }
    }

    input {
        min-width: 150px;
        padding-left: 8px;
        margin-right: 15px;
        border-radius: 4px;
        flex: auto;
        max-width: 600px;
        background-color: var(--vt-c-indigo);
    }

    button {
        width: 30px;
        margin-right: 5px;
    }
}

@media (max-width:1000px) {
    .header_center {
        padding: 2rem 0 5rem;
    }

    .select_box {
        .select {
            display: none;
        }

        input {
            font-size: 0.75rem;
        }
    }
}
</style>
